<template>
	<view class="container">
		<!-- <view class="type">
			<radio-group @change="change_type">
				<radio value="1" :checked="type==1" color="#43eac9">微信支付</radio>
				<radio value="2" :checked="type==2" color="#43eac9">支付宝</radio>
				<radio value="3" :checked="type==3" color="#43eac9">银行卡</radio>
			</radio-group>
		</view> -->
		<view class="form_unit">
			<view class="form_label">收款人姓名</view>
			<input class="inputtext" :focus="focus1" type="text" @focus="test" :value="name" data-name="name" placeholder="请输入收款人姓名" @input="input_"/>
		</view>
		<view class="form_unit">
			<view class="form_label">身份证号码</view>
			<input class="inputtext" :focus="focus2" type="text" @focus="test"  :value="card" data-name="card" placeholder="请输入身份证号码" @input="input_"/>
		</view>
		<view class="form_unit">
			<view class="form_label">手机号码</view>
			<input class="inputtext" :focus="focus3" type="text" @focus="test"  :value="phone" data-name="phone" placeholder="请输入预留手机号码" @input="input_"/>
		</view>
		<view class="form_unit">
			<view class="form_label">银行账号</view>
			<input class="inputtext" :focus="focus4" type="text" @focus="test" :value="account" data-name="account" placeholder="请输入银行账号" @input="input_"/>
		</view>
		<view class="form_pic_">
			<image :src="static+'front.png'" class="card_pic1" data-name="front" :style="{height:h}" v-if="card_pic1=='0'" v-on:click="update_pic"></image>
			<image class="card_pic1" :src="card_pic1" v-if="card_pic1!='0'" data-name="front" :style="{height:h}" v-on:click="update_pic"></image>
		</view>
		 <view class="pic_remark">(点击上传身份证人像面)</view>
		 <view class="form_pic_">
		 	<image :src="static+'behind.png'" class="card_pic2" data-name="behind" :style="{height:h}" v-if="card_pic2=='0'" v-on:click="update_pic"></image>
		 	<image class="card_pic2" :src="card_pic2" v-if="card_pic2!='0'" data-name="behind" :style="{height:h}" v-on:click="update_pic"></image>
		 </view>
		 <view class="pic_remark">(点击上传身份证国徽面)</view>
		 <view class="form_pic_">
		 	<image :src="static+'card.png'" class="card_pic2" data-name="card" :style="{height:h}" v-if="pic=='0'" v-on:click="update_pic"></image>
		 	<image class="card_pic2" :src="pic" v-if="pic!='0'" data-name="card" :style="{height:h}" v-on:click="update_pic"></image>
		 </view>
		 <view class="pic_remark">(点击上传银行卡正面)</view>
		 <view class="lh"></view>
		<view class="button" v-on:click="add_submit">确认添加</view>
	</view>
</template>
<style>
	.container{width:96%;margin:10upx 2%;}
	.type{width:100%;background: #eaf7fd;border-radius: 10upx;height:80upx;line-height: 80upx;text-align: center;color: #282828;}
	radio{font-size: 28upx;padding-left:30upx;}
	.pic_remark{width:50%;margin:10upx 25%;text-align: center;font-size: 28upx;}
	.form_pic_{width:96%;margin:20upx 2%;overflow: hidden;display: flex;justify-content: flex-start;align-items: center;flex-direction: column;}
	.card_pic1,.card_pic2{width:48%;display: flex;justify-content: center;align-items: center;font-size: 64px;color: #EAF7FD;margin:20upx 0;overflow: hidden;}
	.form_pic{width:50%;margin:20upx 25%;overflow: hidden;border:1px solid #419CAF;border-radius: 20upx;}
	.add_pic{width:100%;display: flex;justify-content: center;align-items: center;font-size: 64px;color: #EAF7FD;}
	.form_unit{width: 90%;margin:10upx 5%;border-bottom: 1px solid #f1f1f1;display: flex;justify-content: space-between;align-items: center;height: 80upx;}
	.form_label{width:30%;font-size: 28upx;color: #282828;text-align: right;padding-right:20upx;border-right: 1px solid #f1f1f1;}
	.inputtext{font-size: 28upx;text-align: left;width: 65%;color: #282828;padding-left:3%;}
	.remark{width:75%;margin:50upx 12.5%;display: flex;justify-content: space-between;align-items: center;height: 80upx;}
	.remark_label{width:33%;font-size: 28upx;color: #419CAF;text-align: center;border-right: 1px solid #f1f1f1;line-height: 80upx;}
	.remark_con{width:65%;font-size: 28upx;font-size: 26upx;color: #333333;line-height:40upx;}
	.button{width:90%;margin:10upx 5%;font-size: 30upx;height: 100upx;position: fixed;bottom:0;left:0;
	border-radius: 50upx;background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;text-align: center;line-height: 100upx;}
	.lh{width:100%;height:120upx;}
</style>
<script>
	export default {
		data() {
			return {
				pic:'0',
				card_pic1:'0',
				card_pic2:'0',
				type :1,
				name:'',
				card:'',
				account:'',
				phone:'',
				bank:'',
				height:'',
				h:'',
				id:0,
				submit_status:1,
				default_status:false,
				focus1:false,
				focus2:false,
				focus3:false,
				focus4:false,
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			this.height = res.windowWidth*0.96*0.5+"px";
			this.h      = res.windowWidth*0.96*0.48*9/16+"px";
			this.id = parseInt(e.id);
			if(this.id!=0)
			{
				this.initialize();
			}
		},
		onShow()
		{
			
		},
		methods: {
			test:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					
					// this.focus2 = false;
					// this.focus3 = false;
					// this.focus4 = false;
					this.focus1 = true;
				}
				if(e.currentTarget.dataset.name=="account")
				{
					// this.focus1 = false;					
					// this.focus3 = false;
					// this.focus4 = false;
					this.focus2 = true;
				}
				if(e.currentTarget.dataset.name=="phone")
				{
					// this.focus1 = false;
					// this.focus2 = false;
					// this.focus4 = false;
					this.focus3 = true;
				}
				if(e.currentTarget.dataset.name=="card")
				{
					// this.focus1 = false;
					// this.focus2 = false;
					// this.focus3 = false;
					this.focus4 = true;
				}
			},
			initialize:function()
			{
				var member_id = uni.getStorageSync("member_id");
				var that = this;
				uni.request({
					url: this.url+'/wechat_get_member_collection', 
					method:"POST",
					data: {id:this.id},
					header: {'Content-Type': 'application/x-www-form-urlencoded'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							that.name    = res.data.result[0].account_name;
							that.account = res.data.result[0].account_no;
							that.phone   = res.data.result[0].bank_cell_phone;
							that.card    = res.data.result[0].id_card_no;
							if(res.data.result[0].bank_card_photo.length>10)
							{
								that.pic       = that.url+"/"+res.data.result[0].bank_card_photo;
							}
							if(res.data.result[0].settlement_person_id_card_front_photo.length>10)
							{
								that.card_pic1 = that.url+"/"+res.data.result[0].settlement_person_id_card_front_photo;
							}
							if(res.data.result[0].settlement_person_id_card_back_photo.length>10)
							{
								that.card_pic2 = that.url+"/"+res.data.result[0].settlement_person_id_card_back_photo;
							}
						}
						else
						{
							uni.showModal({
								title:"操作提示",
								content:"系统忙",
								showCancel:false})
						}
					}
				});
			},
			switch_change:function(e)
			{
				// console.log(e.detail.value);
				if(e.detail.value==true)
				{
					this.default_status = 1;
				}
				else
				{
					this.default_status = 0;
				}
			},
			change_type:function(e)
			{
				this.type = parseInt(e.detail.value);
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
				if(e.currentTarget.dataset.name=="account")
				{
					this.account = e.target.value;
				}
				// if(e.currentTarget.dataset.name=="bank")
				// {
				// 	this.bank = e.target.value;
				// }
				if(e.currentTarget.dataset.name=="phone")
				{
					this.phone = e.target.value;
				}
				if(e.currentTarget.dataset.name=="card")
				{
					this.card = e.target.value;
				}
			},
			update_pic:function(e)
			{
				var type = e.currentTarget.dataset.name;
				console.log(type);
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						if(type=="front")
						{
							that.card_pic1 = res.tempFilePaths[0];
						}
						if(type=="behind")
						{
							that.card_pic2 = res.tempFilePaths[0];
						}
						if(type=="card")
						{
							that.pic = res.tempFilePaths[0];
						}
						console.log(that.pic);
						that.upload_file(type);
					}
				});
			},
			upload_file:function(type)
			{
				var member_id    = uni.getStorageSync("member_id");
				var that = this;
				if(type=="front")
				{
					var filePath = that.card_pic1;
				}
				if(type=="behind")
				{
					var filePath = that.card_pic2;
				}
				if(type=="card")
				{
					var filePath = that.pic;
				}
				console.log(this.id);
				uni.showLoading({
					title:"上传中",
					mask:true,
					success:(res)=>{
						uni.uploadFile({
							url:that.url+'/wechat_upload_file', 
							filePath:filePath,
							name:'file',
							formData:{name:type,member_id:member_id,id:that.id},
							success:(res)=>{
								uni.hideLoading();
								var result = JSON.parse(res.data);
								console.log(result);
								that.id = parseInt(result.id);
								// setTimeout(function(){that.initialize()},1000);
							}
						})
					}
				})
			},
			add_submit:function()
			{
				var member_id = uni.getStorageSync("member_id");
				var that = this;
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(this.name.length==0)
				{
					uni.showToast({
						title:"姓名不能为空",
						duration:1500
					})
				}
				else if(this.card.length==0)
				{
					uni.showToast({
						title:"身份证不能为空",
						duration:1500
					})
				}
				else if(!reg_tel.test(this.phone))
				{
					uni.showToast({
						title:"不是有效的手机号码",
						duration:1500
					})
				}
				else if(this.account.length==0)
				{
					uni.showToast({
						title:"账号不能为空",
						duration:1500
					})
				}
				// else if(this.bank.length==0)
				// {
				// 	uni.showToast({
				// 		title:"账号不能为空",
				// 		duration:1500
				// 	})
				// }
				else if(this.id==0 || this.card_pic1=="0" || this.card_pic2=="0" || this.pic=="0")
				{
					uni.showToast({
						title:"图片不能为空",
						duration:1500
					})
				}
				else if(this.submit_status==1)
				{
					this.submit_status = 0;
					uni.showLoading({
						title:"处理中，请耐心等待...",
						mask:true
					});
					uni.request({
						url: this.url+'/wechat_modify_collection', 
						method:"POST",
						data: {name:this.name,phone:this.phone,card:this.card,account:this.account,member_id:member_id,id:this.id},
						header: {'Content-Type': 'application/x-www-form-urlencoded'},
						success: (res) => {
							console.log(res.data);
							if(res.data.status==1)
							{
								uni.hideLoading();
								uni.showToast({
									title:"添加成功",
									duration:2000
								})
								setTimeout(function(){uni.redirectTo({url:'withdrawal'})},1500)
							}
							else
							{
								uni.hideLoading();
								uni.showModal({
									title:"操作提示",
									content:res.data.msg,
									showCancel:false})
							}
						}
					});
				}
			}
		}
	}
</script>
